<template>
  <div class="record">
    <div class="top">
      <!-- 头部 -->
      <van-nav-bar>
        <template #right>
          <span @click="tokind">添加宠物</span>
          <van-icon name="arrow" size="18" />
        </template>
      </van-nav-bar>
      <!-- 信息 -->
      <div class="infor">
        <div class="img">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <div class="right">
          <p>布丁</p>
          <p>已陪伴7天</p>
          <p>2个月|2.5kg|7天</p>
        </div>
      </div>
      <!-- 导航 -->
      <van-row justify="center">
        <van-col span="5">
          <van-icon
            name="notes-o"
            size="35"
            color="#f5c828"
            @click="handlejump"
          />
          <p>日常打卡</p>
        </van-col>
        <van-col span="4">
          <van-icon name="smile-comment-o" size="35" color="#f5c828" />
          <p>提醒吧</p>
        </van-col>
        <van-col span="4">
          <van-icon name="shield-o" size="35" color="#f5c828" />
          <p>健康管理</p>
        </van-col>
        <van-col span="4">
          <van-icon
            name="certificate"
            size="35"
            color="#f5c828"
            @click="rocordjump"
          />
          <p>体重记录</p>
        </van-col>
        <van-col span="5">
          <van-icon name="photo-o" size="35" color="#f5c828" />
          <p>相册</p>
        </van-col>
      </van-row>
    </div>
    <div class="bottom">
      <div class="weight">
        <span class="del">
          <van-icon name="delete-o" size="20px" />
        </span>
        <!-- 步骤条 -->
        <van-steps direction="vertical" :active="active" active-color="#f6cc2c">
          <van-step>
            <h3>体重记录</h3>
            <p>2016-07-10 09:30</p>
          </van-step>
          <van-step>
            <h3>体重记录</h3>
            <p>2016-07-11 10:00</p>
          </van-step>
          <van-step>
            <h3>体重记录</h3>
            <p>新体重2.5kg,比上次重了2.5KG</p>
            <p>2016-07-12 12:40</p>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { ref } from 'vue'

const active = ref(2)
const handlejump = () => {
  router.push('/clock')
}
const rocordjump = () => {
  router.push('/weight')
}
// 添加宠物
const tokind = () => {
  router.push('/kind')
}
</script>

<style scoped lang="less">
@maincolor:#f7cb2a;
.record{
    height: 100%;
    width: 100%;
}
.top{
    background:linear-gradient(#f7cb2a 30%,white 70%);
}
.van-nav-bar{
    background-color: @maincolor;
}
.infor{
    display: flex;
    flex-direction: row;
}
.infor>.img{
    margin-left: 0.5rem;
}
.infor>.right{
    margin-left: 0.5rem;
}
.right p{
    line-height: 0.3rem;
}
.right p:first-child{
    font-size: 20px;
    font-family: bold;
}
.van-col{
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
}
.del{
    float: right;
    margin-right:20px ;
}
.van-button--plain.van-button--primary{
    color: black;
    border-color: white;
}
</style>
